<template>
	<div class="cartcontrol">
		<transition name='move'>
			<div class="cart-decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart()">
				<span class="inner icon-remove_circle_outline"></span>
			</div>
		</transition>
		<div class="count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-increase icon-add_circle" @click.stop.prevent="addCart($event)"></div>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		props: {
			food: {
				type: Object
			}
		},
		
		methods: {
			addCart(event) {
				if(!this.food.count) { 
					Vue.set(this.food,'count',1);
				}
				else{
					this.food.count++;
				}
				this.$emit('cartAdd',event.target);
			},
			decreaseCart() {
				if(this.food.count) {
					this.food.count--;
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.cartcontrol
		font-size 0
		.cart-decrease
			display inline-block
			padding 6px
			opacity 1
			transform translate3d(0,0,0)
			.inner
				display inline-block
				line-height 24px
				font-size 24px
				color rgb(0,160,220)
				transition all 0.4s linear
				transform rotate(0)
			&.move-enter-active,&.move-leave-active
				transition all 0.4s linear
			&.move-enter,&.move-leave-to
				opacity 0   
				transform translate3d(24px,0,0)
				.inner
					transform rotate(180deg)
		.count
			display inline-block
			vertical-align top
			width 12px
			padding-top 6px
			line-height 24px
			text-align center
			font-size 10px
			color rgb(147,153,159)	
		.cart-increase 
			display inline-block
			padding 6px
			font-size 24px
			line-height 24px
			color rgb(0,160,220)
			
			
</style>